<div [ngStyle]="{ width: containerWidth }">
  <div class="lv-progress-wraper" *ngIf="lvType === 'line'">
    <div class="lv-progress-bg">
      <div class="lv-progress-handle" [style.width.%]="lvValue" [style.background]="handleColor">
        <ng-container *ngIf="lvShowLabel && lvInnerLabel" [ngTemplateOutlet]="labelInner"></ng-container>
      </div>
      <ng-container *ngIf="lvShowLabel && lvInnerLabel" [ngTemplateOutlet]="labelInner"></ng-container>
      <span *ngIf="lvValue > 0" class="lv-progress-handle-min" [style.background]="handleColor"></span>
    </div>
    <!-- 扩展内容 -->
    <ng-container *ngTemplateOutlet="lvExtra; context: { $implicit: _lvValue }"></ng-container>
  </div>

  <div class="lv-progress-wraper" *ngIf="lvType === 'circle'">
    <svg width="100%" [attr.viewBox]="viewBox">
      <path
        class="lv-progress-circle-bg"
        fill-opacity="0"
        [attr.stroke-width]="circleBgWidth"
        [ngStyle]="bgPathStyle"
        [attr.d]="circleBgPath"
      ></path>
      <path
        class="lv-progress-circle-handle"
        [attr.d]="circleHandlePath"
        fill-opacity="0"
        [attr.stroke-width]="circleHandleWidth"
        [ngStyle]="handlePathStyle"
      ></path>
    </svg>
  </div>

  <div #dashedWrapper class="lv-progress-wraper" *ngIf="lvType === 'dashed'">
    <svg [attr.width]="viewPort.width" [attr.height]="viewPort.height" [attr.viewBox]="viewBox">
      <path
        class="lv-progress-dashed-bg"
        fill-opacity="0"
        [attr.d]="dashedBg.path"
        [attr.stroke-width]="dashedWidth"
        [ngStyle]="dashedBg.style"
      ></path>
      <path
        class="lv-progress-dashed-handle"
        fill-opacity="0"
        [attr.d]="dashedHandle.path"
        [attr.stroke-width]="dashedWidth"
        [ngStyle]="dashedHandle.style"
      ></path>
    </svg>

    <div *ngIf="lvShowLabel && lvInnerLabel" class="lv-progress-bg" [style.width.%]="lvValue">
      <ng-container [ngTemplateOutlet]="labelInner"></ng-container>
    </div>
    <div *ngIf="lvShowLabel && lvInnerLabel" class="lv-progress-handle" [style.width.%]="lvValue">
      <ng-container [ngTemplateOutlet]="labelInner"></ng-container>
    </div>

    <span *ngIf="lvValue > 0" class="lv-progress-handle-min" [style.background]="handleColor"></span>
    <!-- 扩展内容 -->
    <ng-container *ngTemplateOutlet="lvExtra; context: { $implicit: _lvValue }"></ng-container>
  </div>

  <ng-container *ngIf="lvShowLabel && !lvInnerLabel" [ngTemplateOutlet]="label"></ng-container>
</div>

<ng-template #label>
  <span class="lv-progress-label" [ngSwitch]="true">
    <ng-container *ngSwitchCase="typeUtils.isTemplateRef(lvLabel)">
      <ng-container *ngTemplateOutlet="lvLabel; context: { $implicit: _lvValue }"></ng-container>
    </ng-container>
    <ng-container *ngSwitchDefault>
      <ng-container [ngSwitch]="true">
        <span *ngSwitchCase="status === 'error'" class="lv-progress-error-icon">
          <i [lv-icon]="iconError"></i>
        </span>
        <span *ngSwitchCase="status === 'success'" class="lv-progress-success-icon">
          <i [lv-icon]="iconSuccess"></i>
        </span>
        <span *ngSwitchDefault class="lv-progress-label-text">
          <ng-container *ngIf="typeUtils.isRealString(lvLabel)">{{ lvLabel }}</ng-container>
          <ng-container *ngIf="!typeUtils.isRealString(lvLabel)"
            >{{ _lvValue }}<em>%</em>
          </ng-container>
        </span>
      </ng-container>
    </ng-container>
  </span>
</ng-template>

<ng-template #labelInner>
  <span class="lv-progress-label">
    <span class="lv-progress-label-text">{{ _lvValue }}%</span>
  </span>
</ng-template>
